<style lang="postcss" scoped>
.home-container {
}
</style>
<template>
  <section class="home-container">
    <MasterPage title>
      <div slot="searchContent" class="search-content-slot">
        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="4">
              <FormItem label="课程名称">
                <Input v-model="formItem.courseName"></Input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="开课年级">
                <!-- <Input v-model="formItem.openGrade"></Input> -->
                <Select v-model="formItem.openGrade">
                  <Option value="1">一年级</Option>
                  <Option value="2">二年级</Option>
                  <Option value="3">三年级</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem label="开课学期">
                <Select v-model="formItem.openTerm">
                  <Option value="lastTerm">上学期</Option>
                  <Option value="nextTerm">下学期</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="search">
        <!-- <Button style="margin-right:5px;" type="primary" icon="md-add" @click="new1()">添加</Button> -->
        <Button type="info" icon="md-cloud-upload" @click="excelImport()">批量导入</Button>
        <!-- <Button type="error" icon="md-remove" @click="removeSelection()">删除</Button> -->
      </div>
      <div slot="btns">
        <Button type="info" icon="ios-search" @click="search()">查询</Button>
      </div>
      <div slot="paddingContent">
        <Table :columns="columns1" :data="data1" @on-selection-change="onSelectionChange"></Table>
        <Modal :title="title" v-model="modal1" class-name="vertical-center-modal" :closable="false">
          <Form ref="formValidate" :model="formData" :label-width="80" :rules="ruleValidate">
            <FormItem label="课程编号" prop="courseNo">
              <Input v-model="formData.courseNo" :disabled="editdisable"></Input>
            </FormItem>
            <FormItem label="课程名称" prop="courseName">
              <Input v-model="formData.courseName"></Input>
            </FormItem>
            <FormItem label="开设年级" prop="openGrade">
              <Input v-model="formData.openGrade"></Input>
            </FormItem>
            <FormItem label="开设学期" prop="openTerm">
              <RadioGroup v-model="formData.openTerm">
                <Radio label="lastTerm">上学期</Radio>
                <Radio label="nextTerm">下学期</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="建课时间" v-if="formData.classAt">
              <Input v-model="formData.classAt" disabled></Input>
              <!-- <DatePicker type="date" v-model="formData.classAt" style="width:100%" disabled></DatePicker> -->
            </FormItem>
            <FormItem label="课程性质" prop="type">
              <RadioGroup v-model="formData.type">
                <Radio :label="1">主修</Radio>
                <Radio :label="0">辅修</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="课程状态" prop="status">
              <RadioGroup v-model="formData.status">
                <Radio :label="1">正常</Radio>
                <Radio :label="0">停用</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="课程描述">
              <Input v-model="formData.description"></Input>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="model1Closed()">取消</Button>
            <Button type="primary" size="large" @click="ok()">确定</Button>
          </div>
        </Modal>
        <Modal title="EXCEL导入" v-model="excelModel" class-name="vertical-center-modal">
          <Upload
            ref="upload"
            type="drag"
            :action="GLOBAL.updateUrl+'/gm_course/importCourseExcel'"
            :on-success="handleSuccess"
            :format="['xlsx','xls']"
            :on-format-error="handleFormatError"
          >
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>点击或拖拽文件上传</p>
            </div>
          </Upload>
          <div slot="footer"></div>
        </Modal>
      </div>
      <div slot="pager">
        <!-- <Page :total="data1.length"/> -->
        <Page
          :total="pageTotal"
          :current="formItem.page"
          :page-size="formItem.size"
          show-total
          show-sizer
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
        />
      </div>
    </MasterPage>
  </section>
</template>
<script>
import MasterPage from "@/components/Master";
import { pageList, update } from "@/services/course";
import moment from "moment";

export default {
  components: {
    MasterPage
  },
  async mounted() {
    console.log("course");
    await this.search();
  },
  methods: {
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: `文件:${file.name}格式不正确，请上传.xls,.xlsx文件。`
      });
    },
    handleSuccess(res, file) {
      if (res && res.success) {
        this.$Message.info("数据导入成功");
      } else {
        this.$Notice.error({ title: "数据导入失败", desc: res.message });
        this.$refs.upload.clearFiles();
      }
    },
    excelImport() {
      this.excelModel = true;
      this.files = [];
    },
    async removeSelection() {
      //批量删除
      try {
        // await generate(this.generateData)
        this.$Message.info("操作成功");
        await this.search(this.formItem);
      } catch (err) {
        this.$Notice.error({ title: "操作失败", desc: err });
      }
    },
    onSelectionChange(selection) {
      this.selection = selection;
    },
    edit(row) {
      this.formData = Object.assign({}, row);
      this.title = "编辑";
      this.modal1 = true;
      this.editdisable = true;
    },
    async remove1(row) {
      console.log(row);
      await remove(row.id);
      this.data1 = await list();
    },
    async new1() {
      this.formData.type = 1;
      this.formData.status = 1;
      this.title = "新增";
      this.editdisable = false;
      this.modal1 = true;
    },
    async ok() {
      let valid = await this.$refs.formValidate.validate();
      if (!valid) return;
      try {
        // if (this.formData.classAt) this.formData.classAt = new Date(this.formData.classAt)
        // if (this.title == '新增') {
        //   // //新增
        //   // await add(this.formData)
        // } else {
        //修改
        await update(this.formData);
        // }
        this.$Message.info("操作成功");
        this.model1Closed();
        await this.search(this.formItem);
      } catch (err) {
        this.$Notice.error({ title: "操作失败", desc: err });
      }
    },
    model1Closed() {
      this.modal1 = false;
      this.formData = {};
      this.$refs.formValidate.resetFields();
    },
    async search() {
      let { count, list } = await pageList(this.formItem);
      this.data1 = list;
      this.pageTotal = count;
    },
    async handlePage(n) {
      this.formItem.page = n;
      await this.search();
    },
    async handlePageSize(n) {
      this.formItem.size = n;
      await this.search();
    }
  },
  data() {
    return {
      files: [],
      excelModel: false,
      editdisable: false,
      selection: [],
      modal1: false,
      title: "",
      formData: {},
      pageTotal: 15,
      pageNum: 1,
      pageSize: 10,
      formItem: {},
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "课程号",
          key: "courseNo"
        },
        {
          title: "课程名称",
          key: "courseName"
        },
        {
          title: "开课年级",
          key: "openGrade"
        },
        {
          title: "开课学期",
          key: "openTerm",
          render: (h, params) => {
            return h("p", params.row.type == "lastTerm" ? "上学期" : "下学期");
          }
        },
        {
          title: "建课时间",
          key: "classAt",
          width: 100
        },
        {
          title: "课程性质",
          key: "type",
          render: (h, params) => {
            return h("p", params.row.type == 1 ? "主修" : "辅修");
          }
        },
        {
          title: "课程状态",
          key: "status",
          render: (h, params) => {
            return h("p", params.row.status == 1 ? "正常" : "停用");
          }
        },
        {
          title: "课程描述",
          key: "description"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      ruleValidate: {
        courseNo: [{ required: true, message: "必填", trigger: "blur" }],
        courseName: [{ required: true, message: "必填", trigger: "blur" }],
        openGrade: [{ required: true, message: "必填", trigger: "blur" }],
        openTerm: [{ required: true, message: "必填", trigger: "blur" }],
        type: [
          { required: true, type: "number", message: "必填", trigger: "blur" }
        ],
        status: [
          { required: true, type: "number", message: "必填", trigger: "blur" }
        ]
      },
      data1: []
    };
  }
};
</script>
